import React, { useState, useEffect, useRef } from 'react';
import { connect } from 'umi';
import { Form, Input, Button, Card } from 'antd';
import styles from './index.less';
const gridStyle = {
  width: '100%',
  textAlign: 'center',
};

const Login = (props: any) => {
  const {
    dispatch,
    loading,
    companys,
    match: { params },
  } = props;

  const onFinish = (values: any) => {
    dispatch({ type: 'enoadLogin/login', payload: values });
  };

  const onFinishFailed = (errorInfo: any) => {
    console.log('Failed:', errorInfo);
  };

  const onCompanySelect = (user) => {
    dispatch({
      type: 'enoadLogin/loginCompany',
      payload: { companyId: user.company._id, userId: user._id },
    });
  };

  return (
    <div className={styles.loginContainer}>
      <div className={styles.loginDiv}>
        {companys.length > 0 ? (
          <Card title="所属公司">
            {companys.map((user) => {
              return (
                <Card.Grid
                  style={gridStyle}
                  key={user._id}
                  onClick={() => onCompanySelect(user)}
                >
                  {user.company.companyName}
                </Card.Grid>
              );
            })}
          </Card>
        ) : (
          <Form
            name="basic"
            labelCol={{ span: 8 }}
            wrapperCol={{ span: 16 }}
            labelAlign={'left'}
            initialValues={{ remember: true }}
            onFinish={onFinish}
            onFinishFailed={onFinishFailed}
            autoComplete="off"
          >
            <Form.Item
              label="用户名"
              name="username"
              rules={[{ required: true, message: '请输入用户名' }]}
            >
              <Input />
            </Form.Item>

            <Form.Item
              label="密码"
              name="password"
              rules={[{ required: true, message: '请输入密码' }]}
            >
              <Input.Password />
            </Form.Item>

            <Button type="primary" htmlType="submit" style={{ width: '100%' }}>
              {'登录'}
            </Button>
          </Form>
        )}
      </div>
    </div>
  );
};

export default connect(({ enoadLogin, loading }) => ({
  ...enoadLogin,
  loading,
}))(Login);
